data: {
            "key": $("#SearchKeyInput").val(),
            "Category": $("#SearchOptionCategory option:selected").val(),
            "Min": $("#SearchKeyInputMinPrice").val(),
            "Max": $("#SearchKeyInputMaxPrice").val(),
            "BreakFast": $('#CheckboxForBreakFast:checked').val(),
            "Lunch": $('#CheckboxForLunch:checked').val(),
            "Dinner": $('#CheckboxForDinner:checked').val()

在Ajax傳遞參數進去後端時，建立一個Data，裡面的key與Value分別為上面七樣從前端節點選取的值，而Key則是我們自己設定的，在後端拿取參數時，就必須拿取前方的Key，而型別也要打對。

再來我們會設置前端的分頁：

            var itemPerPage = 8;
            var HowManyPages = (data.length / itemPerPage);//40/8 =5頁;

先設定每頁以8個item為一個單位，
計算 如果我的data回傳長度有40，那除以8個品項，
我總共的頁面會是5頁。

不過如果總品項大於40呢？

            var showItems = 0;
            if (data.length < itemPerPage)
            {
                showItems = data.length;
            }
            else
            {
                showItems = (data.length / HowManyPages);
            }

這裡先宣告一個 showItems變數為容器，
如果 所有品項 小於 我每頁所設定的item(8)，
秀出的所有品項就只會有我的 最大長度（比如 7項）。

而不是呢？
就會依照剛剛設定的數字去做處理，一頁要秀的數量(8) = 總品項(40) / 總共有幾頁(5頁);

pdtItem = data;

這是我們所要拿到的物件，在function外面，我們也必須宣告一個

var pdtItem= null;

為容器。 以這樣處理，我們之後輸出的所有字串pdtItem，在編譯的時候就會都是物件。

再來宣告一個Label容器裝我們的節點字串。

var label = `<section class='featured spad'><p>搜尋結果：共有 ${data.length} 筆商品</p><div class='container'><div>`;
            label += "<div class='row featured__filter' id='pagesForForLoop'>";

上面為我們一開始設定的節點框架，以及物件總長（總商品數目）。

再來我們進行迴圈，把從0到最後的物件都取出來。

for (let i = 0; i < showItems; i++) {
                label += `
                          <div class="col-lg-3 col-md-4 col-sm-6 mix oranges fresh-meat">
                          <div class="featured__item">
                          <div class="featured__item__pic set-bg" style="background-image: url(${data[i].tProduct.cPicture.replace("~", "")})">
                          <ul class="featured__item__pic__hover">
                          <li><a href="javascript: void(0)" onclick="addCart(pdtItem[${i}].tProduct)"><i class="fa fa-shopping-cart"></i></a></li>
                          </ul>
                          <ul class="start_for_homepage">`

上面會取出 tProduct物件中的 Picture，再用replace將~ 給空字串化，
創立一個 onclick事件，href:javascript: void(0)，則是讓點擊後的畫面不要亂跑。
onclick事件的參數，我們設定 取出物件[index]的tProduct物件，
所以傳進addCart function的參數就會是一個tProduct型別的物件，裡面會有所有tProduct物件所擁有的任何屬性。

再來是一個商品的評分， 平均分數 如果 <= 0 就會是 0， 如果不是 就會是 int轉化(總和/總數)。

let Average_message_adri = data[i].count <= 0 ? 0 : parseInt(data[i].sum / data[i].count)

第一個for迴圈是平均分數有幾個，我們就畫幾顆橘色的星星span上去，第二個for迴圈是 5顆星-平均分數 ，若平均分數為3，可以取得2顆灰色的星星。

                for (let x = 0; x < Average_message_adri; x++) {
                    label += `<li><span class="fa fa-star checked" style="color: orange;font-size:25px""></span></li>`
                }
                for (let g = 0; g < 5 - Average_message_adri; g++) {
                    label += `<li><span class="fa fa-star checked" style="color: #d5d3cf;font-size:25px""></span></li>`
                }
                label += ` </ul>

再來放上製作時間的分鐘數

<span class="product_time_yu">製作時間：${data[i].tProduct.cFinishedTime}分鐘</span> `

下面則顯示 我們要導向的商品頁面超連結、商品價格以及商品的庫存量

                label+=`</div>
                        <div class="featured__item__text">
                        <h6><a href="/ProductDetail/ProductData?id=${data[i].tProduct.cProductId}">${data[i].tProduct.cProductName}</a></h6>
                        <h5>$${data[i].tProduct.cPrice}</h5>
                        <h6>庫存量 ${data[i].tProduct.cQuantity} </h6>
                        </div>
                        </div>
                        </div>`;
            }

順便掛上 for迴圈的結束括號

所有商品的結束標籤

            label += "</ div>";
            label += "</ div>";
            label += "</div>";
            label += `<nav aria-label="Page navigation example">
            <ul class="pagination ">`;

再來是我們的分頁連結

            for (var i = 0; i < HowManyPages; i++)
            {
                label += `<li class="page-item">
                <button type="button" class="page-link" onclick="pagesForSearch(${i})">${i + 1}</button>
                </li>`;
            }

結束區域的標籤，把divforSearch節點下的東西全部替換成我們寫好的label字串，
再掛上 ajax success的結束括號。

            label += `</ul>
                      </nav>`;
            label += "</ section>";

            $("#divforSearch").html(label);
        }

這樣就完成了我們前端的傳送參數，接收物件，節點展示，下一篇會講解後端是怎麼把傳進的參數，處理成可以用的data物件。